<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        /**
         * Axios 是基于 Promise 的网络请求库，可以发送 http 请求
         * Axios 的返回值是一个 Promise 对象
         * 
         * Fetch基于浏览器的原生api，Axios需要依赖第三方的库文件
         *
         * Axios 可以用于浏览器和 nodejs，Fetch主要用于浏览器
         */

        let getUrl = "http://127.0.0.1:9090/ss-app/sc/get";
        let postUrl = "http://127.0.0.1:9090/ss-app/sc/post/form";
        let postJsonUrl = "http://127.0.0.1:9090/ss-app/sc/post/body";
        // get
        axios.get(getUrl).then(response => {
            console.log("response", response);
            return response.data;
        }).then(data => {
            console.log("get.data: ", data);
        }).catch(e => {
            console.log("get.error: ", e.message);
        }).finally(() => {
            console.log("get.finally");
        });

        // post form
        let data = {
             "annexId": "1046878434611077121",
             "bizId": "1046878434611077121"
        }

        axios.post(postUrl, data, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        }).then(response => {
            console.log("response", response);
            return response.data;
        }).then(data => {
            console.log("post.data: ", data);
        }).catch(e => {
            console.log("post.error: ", e.message);
        }).finally(() => {
            console.log("post.finally");
        });

        // post json 默认请求头是 application/json，对象也直接转为json
        let loginData = {
            "loginName": "1046878434611077121",
            "password": "1046878434611077121"
        }
        axios.post(postJsonUrl, loginData).then(response => {
            console.log("response", response);
            return response.data;
        }).then(data => {
            console.log("post.data: ", data);
        }).catch(e => {
            console.log("post.error: ", e.message);
        }).finally(() => {
            console.log("post.finally");
        });
    </script>
</body>
</html>